<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        html{
            width: 3000px;
            height: 5000px;
        }
    </style>
</head>
<body>
    
</body>
<script>
    // 窗口的可视宽高 -> 文档宽高 + 滚动条
    // console.log("窗口的可视宽高:",window.innerWidth,window.innerHeight);

    // 文档的可视宽高  -> 页面在浏览器的可视区域(一屏宽高)  不包含滚动条
    // document.documentElement.clientWidth  文档的可视宽度
    // document.documentElement.clientHeight 文档的可视高度

    // console.log("文档的的可视宽高:",document.documentElement.clientWidth,document.documentElement.clientHeight);

    // resizeHandler()
    // window.onresize = resizeHandler;

    // function resizeHandler(){
    //     console.log("窗口的可视宽高:",window.innerWidth,window.innerHeight);
    //     console.log("文档的的可视宽高:",document.documentElement.clientWidth,document.documentElement.clientHeight);
    // }


    // 文档的实际宽高  -> 页面在浏览器实际占据的位置
    // document.documentElement.scrollWidth    文档的实际宽度
    // document.documentElement.scrollHeight   文档的实际高度
    // console.log("文档的实际宽高:",document.documentElement.scrollWidth,document.documentElement.scrollHeight);

    // window.onresize = function(){
    //     console.log("文档的实际宽高:",document.documentElement.scrollWidth,document.documentElement.scrollHeight);

    // }


    // 滚动条距离页面左边和顶部的位置  => 获取和设置滚动条的位置!!!
    // document.documentElement.scrollLeft   水平方向滚动条的位置
    // document.documentElement.scrollTop    垂直方向滚动条的位置

    // 滚动条向下拉 -> 页面往上移动 => 所以滚动条距离页面顶部的位置 === 页面上升的距离

    // 页面滚动的最小距离:  0
    // 页面滚动的最大距离:  页面实际宽高 - 可视宽高

    scrollHandler();
    window.onscroll = scrollHandler;

    function scrollHandler(){
        // 兼容(了解)        常规浏览器(html)                ||  ie低版本(body)
        // var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
        // var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        // console.log("滚动条位置", scrollLeft, scrollTop);


        console.log("滚动条位置", document.documentElement.scrollLeft, document.documentElement.scrollTop);
    }


    document.ondblclick = function(){
        document.documentElement.scrollLeft = 0;
        document.documentElement.scrollTop = 0;
    }







</script>
</html>